<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>jQuery Timeline 0.9.4 - Dando vida al tiempo</title>
	<link rel="stylesheet" href="jquery/jquerytime/css/style.css" type="text/css" media="screen" />
	
	<script src="jquery/jquery-1.6.4.js" type="text/javascript"></script>
	<script src="jquery/jquerytime/js/jquery.timelinr-0.9.4.js" type="text/javascript"></script>
	<script type="text/javascript"> 
	var xmlDocDates;
	var xmlDocDetails;
	
	$(function(){
		makeRequest("orderDates");
	});
	
	
	function makeRequest(str){
		url = "queries.php?string=" + str;
		if (window.XMLHttpRequest) { // Non-IE browsers 
			req = new XMLHttpRequest(); 
			req.onreadystatechange = targetDiv; 
			req.str = str;
			try { 
				req.open("GET", url, true); 
			} catch (e) { 
				alert(e); 
			} 
			req.send(null); 
		} else if (window.ActiveXObject) { // IE 
		req = new ActiveXObject("Microsoft.XMLHTTP"); 
			if (req) { 
				req.onreadystatechange = targetDiv; 
				req.open("GET", url, true); 
				req.send(); 
			} 
		}
	}

	function targetDiv() { 
		if (req.readyState == 4) { // Complete 
			if (req.status == 200) { // OK response 
				var patt = /orderDetailInfoPerDay/g;
				var res = patt.exec(req.str);
				myResponse = req.responseText;
				if (window.DOMParser)
				{
					parser=new DOMParser();
					if (res == "orderDetailInfoPerDay"){
						xmlDocDetails=parser.parseFromString(myResponse,"text/xml");
					} else if(req.str == "orderDates"){
						xmlDocDates=parser.parseFromString(myResponse,"text/xml");
					}
				}
				else // Internet Explorer
				{
					if (res == "orderDetailInfoPerDay"){
						xmlDocDetails=new ActiveXObject("Microsoft.XMLDOM");
						xmlDocDetail.async="false";
						xmlDocDetails.loadXML(myResponse);
					} else if(req.str == "orderDates"){
						xmlDocDates=new ActiveXObject("Microsoft.XMLDOM");
						xmlDocDates.async="false";
						xmlDocDates.loadXML(myResponse); 
					}
				}
				var count = 0;
				var myStr = '';
				if(req.str == "orderDates"){
					while(xmlDocDates.getElementsByTagName("DateGroup")[count] != undefined){
						var currID = xmlDocDates.getElementsByTagName("DateGroup")[count].childNodes[0].childNodes[0].nodeValue;
						myStr = myStr + '<option value="' + count + '">' + currID + '</option>'
						count++;
					}
					document.getElementById("custSelect").innerHTML = myStr;				
					updateTimeline();
				}
				if (res == "orderDetailInfoPerDay"){
					while(xmlDocDetails.getElementsByTagName("DetailGroup")[count] != undefined){
					/*	var currID = xmlDocDetails.getElementsByTagName("DetailGroup")[count].childNodes[0].childNodes[0].nodeValue;
						myStr = myStr + '<option value="' + count + '">' + currID + '</option>'
					*/	count++;
					}	
				}
				
			} else { 
				alert("Problem: " + req.statusText); 
			} 
		}	 
	}
	
	
	function updateTimeline(){
		var myStr = '';
		var count = 2;
		var selectIndex = document.getElementById("custSelect").value;
		var dateUL = document.getElementById("dates");
		while(xmlDocDates.getElementsByTagName("DateGroup")[selectIndex].childNodes[count] != undefined){
			//parse xml and retrieve order date
			var thisDate = xmlDocDates.getElementsByTagName("DateGroup")[selectIndex].childNodes[count].childNodes[0].nodeValue;
			//split and create proper tags for timeline string 'lineStr'
			var dateArray = thisDate.split("-");
			var year = dateArray[0];
			var month = dateArray[1];
			var day = dateArray[2];
			var lineStr = '';
			switch(month){
				case '01':lineStr = 'Jan';break;
				case '02':lineStr = 'Feb';break;
				case '03':lineStr = 'Mar';break;
				case '04':lineStr = 'Apr';break;
				case '05':lineStr = 'May';break;
				case '06':lineStr = 'Jun';break;
				case '07':lineStr = 'Jul';break;
				case '08':lineStr = 'Aug';break;
				case '09':lineStr = 'Sep';break;
				case '10':lineStr = 'Oct';break;
				case '11':lineStr = 'Nov';break;
				case '12':lineStr = 'Dec';break;
				default:lineStr = "ERROR";
			}
			lineStr = lineStr + ' ' + day;			
			var newA = document.createElement("a");
			newA.href = '#' + lineStr;
			newA.innerHTML = lineStr;
			var newLI = document.createElement("LI");
			newLI.appendChild(newA);
			dateUL.appendChild(newLI);			
			hvnReqStr = "orderDetailInfoPerDay&date = " + thisDate;
			makeRequest(encodeURIComponent(hvnReqStr));
			count++;
		}
		var issuesUL = document.getElementById("issues");
		var newP = document.createElement("p");
		$().timelinr()
	}
	</script>
</head>

<body>

	<a href="javascript:processAjax('foo');">CLICK ME</a> 
	<div id="Return"></div> 
	<br />
	
	<div>
		<select id="custSelect" href="javascript:updateTimeline();">
		</select>
	</div>
	
	<div id="timeline">
		<ul id="dates">
		</ul>
		<ul id="issues">
			<li id="1977">
				<img src="img/hebuddy.gif"  width="256" height="256" />
				<img src="img/greed.gif"  width="256" height="256" />				
			</li>
		</ul>
		<div id="grad_left"></div>
		<div id="grad_right"></div>
		<a href="#" id="next">+</a>
		<a href="#" id="prev">-</a>
	</div>
	
</body>
</html>
